<template>
	<view class="login login-bg">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="username" type="text" maxlength="20" placeholder="用户名/电话"></wInput>
				<wInput v-model="password" type="password" maxlength="20" placeholder="密码" isShowPass></wInput>
			</view>
			<wButton text="登 录" :rotate="isRotate" @click.native="formSubmit()"></wButton>
		</view>
	</view>
</template>

<script>
	import wInput from '@/components/watch-login/watch-input.vue'
	import wButton from '@/components/watch-login/watch-button.vue'
	import config from '../../config.js'
	import util from '../../utils/util.js'

	export default {
		data() {
			return {
				isRotate: false, //是否加载旋转
				// logo图片
				logoImage: '/static/images/logo.png',
				username: '', //用户/电话
				password: '', //密码
				about: config.info.about,
				redirect: encodeURIComponent('/pages/me/me'),
			}
		},
		components: {
			wInput,
			wButton,
		},
		onLoad: function(op) {
			if (config.debug) console.log("onLoad", op)
			if (op.redirect) this.redirect = op.redirect
		},
		onShow: function() {
			let token = util.getToken()
			if (token) {
				let url = decodeURIComponent(this.redirect)
				if (url.indexOf("?") > -1) {
					uni.redirectTo({
						url: url
					})
				} else {
					uni.switchTab({
						url: url
					})
				}
			}
		},
		methods: {
			toReg: function() {
				uni.navigateTo({
					url: '/pages/reg/reg?redirect=' + this.redirect
				})
			},
			findPassword: function(e) {
				uni.showModal({
					title: '温馨提示',
					content: '目前暂不支持找回密码的功能，如果忘记了密码，请联系管理员将密码找回',
				})
			},
			formSubmit: function(e) {
				let that = this

				if (config.debug) console.log("formSubmit",e);
				//登录
				if (that.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}

				if (that.password == '' || that.username == '') {
					util.toastError('账号和密码均不能为空')
					return
				}

				that.isRotate = true
				let user = {username:that.username,password:that.password}
				util.request('/admin/login/token', user, 'POST').then((res) => {
					if (config.debug) console.log("/admin/login/token", res);
					if (res.code !== 0) {
						util.toastError('登录失败：未知错误')
						that.loading = false
						return
					}
					let token = res.data.access_token
					let userInfo = {...user,...res.data}
					if (config.debug) console.log("登陆后的完整用户信息：",userInfo);					
					util.request('/base/user/login', {username:user.username}, 'POST').then((res) => {
						util.setToken(token)
						util.setUser(userInfo)
						util.toastSuccess('登录成功')
						let access = []
						res.data.authorities.map(item=>{
							access.push(item.authority)
						})
						res.data.access = access
						util.setUserInfo(res.data)
						uni.switchTab({
							url: decodeURIComponent('../home/index')
						})
					})
				}).catch((e) => {
					if (config.debug) console.log(e);
					that.isRotate = false
					util.toastError(e.data.message)
				})
			},
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
	
	.login-bg {
		/* width: 100%;
		height: 100%;
		background-image: url('/static/img/login-bg.png');
		background-size: cover;
		background-position: 50%;
		position: absolute; */
	}
	
	.login-bg .content .header image {
		width: 241rpx;
		height: 241rpx;
	}
	
	/* .login-bg .content .header {
		width: 241rpx;
		height: 241rpx;
		background-size: 241rpx;
		background-image: url('/static/img/logo.png');
	} */
	/* @import url("../../static/css/reg-login.css");
	image {
		width: 180upx;
		height: 180upx;
		border-radius: 90upx;
		border: 1px solid #ddd;
		margin: 15px auto;
		display: block;
	} */
</style>
